<template>
	<view>
		<scroll-view scroll-x class="scroll-row" :scroll-into-view="scrollInto" scroll-with-animation
			style="height: 100rpx;">
			<view class="scroll-row-item px-4 py-2" v-for="(item,index) in tabBars" :key="index" :id="'tab'+index"
				:class="tabIndex === index ? 'text-main font-lg font-weight-bold':''" @click="changeSwitch(index)">
				{{item.name}}
			</view>
		</scroll-view>
		<swiper :duration="150" :current="tabIndex" @change="swipper" :style="'height:'+scrollH+'px'">
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="moreLoad(index)">
					<!-- 样式列表 -->
					<template v-if="item.list.length > 0">
						<block v-for="(item2,index2) in item.list " :key="index2">
							<topic-list :item="item2" :index="index2"></topic-list>
							<!-- 背景线 -->
							<divider></divider>
						</block>
						<!-- 上拉加载 -->
						<load-more :moreLoad="item.moreLoad"></load-more>
					</template>
					<!-- 无数据显示的内容 -->
					<template>
						<no-thing></no-thing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import topicList from '@/components/news/topic-list.vue'
	import loadMore from '@/components/common/load-more.vue';

	const demo = [{
			cover: '/static/demo/topicpic/1.jpeg',
			name: '话题名称',
			desc: '话题描述',
			news_count: '10',
			today_count: '10'
		},
		{
			cover: '/static/demo/topicpic/1.jpeg',
			name: '话题名称哈哈哈哈',
			desc: '话题描述',
			news_count: '10',
			today_count: '10'
		},
		{
			cover: '/static/demo/topicpic/1.jpeg',
			name: '话题名称',
			desc: '话题描述',
			news_count: '10',
			today_count: '10'
		},
		{
			cover: '/static/demo/topicpic/1.jpeg',
			name: '话题名称',
			desc: '话题描述',
			news_count: '10',
			today_count: '10'
		},
		{
			cover: '/static/demo/topicpic/1.jpeg',
			name: '话题名称哈哈哈哈',
			desc: '话题描述',
			news_count: '10',
			today_count: '10'
		},
		{
			cover: '/static/demo/topicpic/1.jpeg',
			name: '话题名称',
			desc: '话题描述',
			news_count: '10',
			today_count: '10'
		},
		{
			cover: '/static/demo/topicpic/1.jpeg',
			name: '话题名称哈哈哈哈',
			desc: '话题描述',
			news_count: '10',
			today_count: '10'
		},
	]
	export default {
		components: {
			topicList,
			loadMore
		},
		data() {
			return {
				scrollH: 600, //屏幕高度
				scrollInto: "",
				tabIndex: 0, //默认选中
				// 顶部选项卡
				tabBars: [{
						name: '推荐'
					},
					{
						name: '关注'
					},
					{
						name: '财经'
					},
					{
						name: '新闻'
					},
					{
						name: '热点'
					},
					{
						name: '体育'
					},
					{
						name: '电影'
					}
				],
				newsList: []
			}
		},
		// //	监听原生标题栏搜索输入框点击事件
		// onNavigationBarSearchInputClicked() {
		// 	uni.navigateTo({
		// 		url: '../search/search'
		// 	})
		// },
		// //监听导航按钮点击事件
		// onNavigationBarButtonTap() {
		// 	uni.navigateTo({
		// 		url: '../add-input/add-input'
		// 	})
		// },
		//加载页面时
		onLoad() {
			// 获取高度
			//异步获取
			let res = uni.getSystemInfo({
				success: (res) => {
					console.log(res); //打印全部设备信息
					//px转化为rpx的计算
					this.scrollH = res.windowHeight - uni.upx2px(101)
				}
			})
			//根据选项 生成列表
			this.getDate()
		},
		watch: {

		},
		methods: {
			// 上拉加载
			moreLoad(index) {
				//获取列表数据
				console.log(this.newsList[index]);
				let item = this.newsList[index];
				if (item.moreLoad !== '上拉加载更多') return;
				//修改当前列表加载状态
				item.moreLoad = '加载中...';
				//模拟数据请求
				setTimeout(() => {
					//加载数据
					console.log(item.list);
					//ess6语法,扩展
					item.list = [...item.list, ...item.list];

					item.moreLoad = '上拉加载更多'
				}, 2000)
			},
			//获取数据
			getDate() {
				//生成列表模板
				var arr = []
				for (let i = 0; i < this.tabBars.length; i++) {
					let obj = {
						//上拉加载更多;加载中;没有更多了
						moreLoad: '上拉加载更多',
						list: []
					}
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
			// 监听滑动事件
			swipper(e) {
				// console.log(e.detail.current);
				// 调用选项卡=======拿到当前索引
				this.changeSwitch(e.detail.current)
			},
			// 点击切换
			changeSwitch(index) {
				// console.log(this.scrollInto);
				// console.log(index);
				if (this.tabIndex === index) {
					return
				}
				// console.log(this.tabIndex);
				this.tabIndex = index;
				// this.scrollInto要=绑定id的值 :id="'tab'+index"
				this.scrollInto = 'tab' + index
			},
			// 关注
			// follow(e) {
			// 	this.newsList[e].isFllow = true;
			// 	uni.showToast({
			// 		title: '关注成功',
			// 		duration: 1000
			// 	})
			// },
			//顶踩操作
			// doSupport(e) {

			// 	// console.log(this.newsList[e.index].list[e.index]);
			// 	// 如果是顶了就不能再次顶,已经踩了就不能再次踩,如果是没操作就可以进行顶踩操作
			// 	// let item = this.list[e.index];
			// 	let item = this.newsList[this.tabIndex].list[e.index];
			// 	let msg = e.type === 'support' ? '顶' : '踩';
			// 	/* 用户未进行操作 */
			// 	if (item.support.type === '') {
			// 		//拼接字符串
			// 		item.support[e.type + '_count']++;
			// 		console.log(e.type);
			// 	} else if (item.support.type === 'support' && e.type === 'unsupport') {
			// 		// 顶-1
			// 		item.support.support_count--;
			// 		// 踩+1
			// 		item.support.unsupport_count++;
			// 	} else if (item.support.type === 'unsupport' && e.type === 'support') {
			// 		// 顶+1
			// 		item.support.support_count++;
			// 		// 踩－1
			// 		item.support.unsupport_count--;
			// 	}
			// 	item.support.type = e.type;
			// 	// 消息提示
			// 	uni.showToast({
			// 		title: msg + '成功'
			// 	})
			// }
		},

		computed: {

		},
	}
</script>

<style lang="scss">

</style>
